<template>
	<view class="pay-container">
		<view class="pay-order-info">
			<view class="address-container" @click="togglePopup">
				<view v-if="addressData" class="has-address">
					<view class="title">
						<view class="">
							<text class="name">{{ addressData.name }}</text>
							<text class="mobile">{{ addressData.phone }}</text>
						</view>
						<text
							class="address in1line">{{ `${addressData.province_name} ${addressData.city_name} ${addressData.area_name}` }}
							{{ addressData.address_detail }}</text>
					</view>
					<view class="iconfont icon-right"></view>
				</view>
				<view v-else class="no-address">
					<view class="title">收货地址</view>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
			<view class="order-pay-list">
				<block v-for="(item, index) in orderDetail.select_carts" :key="index">
					<view class="item">
						<image class="order-image" :src="item.product_info.thumbnail" mode=""></image>
						<view class="item-right">
							<text class="name">{{ item.product_info.pname }}</text>
							<view class="order-info">
								<view class="price-wrapper">
									<text class="unit">￥</text>
									<text class="price">{{ danjia }}</text>
								</view>
								<view class="add-reduce">
									<image class="reduce-btn" src="../../static/images/pay/reduce@2x.png" mode=""
										@click="jianCont()"></image>
									<text class="count">{{ count }}</text>
									<image class="add-btn" src="../../static/images/pay/add@2x.png" mode=""
										@click="jiaCont()"></image>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="order-message">
				<view class="message-price-total">
					<text class="label">订单总额</text>
					<text class="value">￥{{ danjia * count }}</text>
				</view>
				<view class="discount">
					<view class="left">
						<image v-if="isGou == 0" class="select-icon" @click="clickGou(1)"
							src="../../static/images/mall/select@2x.png" mode=""></image>
						<image v-else class="select-icon" @click="clickGou(0)"
							src="../../static/images/mall/selected@2x.png" mode="">
						</image>



						<image class="flower-icon" src="../../static/images/mall/flower@2x.png" mode=""></image>
						<text v-if="meiguiCont >= danjia * count">{{meiguiCont}},{{orderDetail.content}}</text>
						<text v-else-if="meiguiCont < danjia * count">{{meiguiCont}},{{orderDetail.content}}</text>
					</view>
					<view class="right" v-if="isGou == 1">- ¥ {{orderDetail.deduction}}</view>
					<view class="right" v-else>- ¥ 0</view>
				</view>
				<view class="current-wrapper">
					<text class="total-count">共{{count}}件</text>
					<view class="total-price" style="display:flex;flex-direction:row;">
						<text class="label">实付：</text>

						<view v-if="isGou == 1">
							<!-- <text class="money" v-if="meiguiCont >= danjia * count">￥0</text> -->
							<text class="money">￥{{orderDetail.deduction_total_price}}</text>
						</view>
						<view v-else>
							<text class="money">￥{{orderDetail.total_price}}</text>
						</view>



					</view>
				</view>
				<view class="textarea-wrapper">
					<text class="label">买家留言</text>
					<textarea placeholder-style="" v-model="buyerMessage" placeholder="100字以内" />
				</view>
			</view>
		</view>



		<view class="pay-footer">
			<view class="total-price">
				<text class="label">总计：</text>
				<text v-if="isGou == 1">
					<text class="money">￥{{orderDetail.deduction_total_price}}</text>
				</text>
				<text v-else>
					<text class="money">￥{{orderDetail.total_price}}</text>
				</text>
			</view>
			<view class="pay-btn" @click="submitPay">去支付</view>
		</view>



		<uni-popup ref="showpopup" type="bottom" @change="change">
			<view class="popup-address-list">
				<view class="popup-header">
					<text class="cancel" @click="closePop">取消</text>
					<text class="title">我的收货地址</text>
				</view>
				<view class="address-list">
					<block v-for="(item, index) in addressList" :key="index">
						<view class="address-item">
							<view class="" @click="selectAddress(item)">
								<image v-if="addressData._id === item._id" class="select-btn"
									src="../../static/images/mall/selected@2x.png" mode=""></image>
								<image v-else class="select-btn" src="../../static/images/mall/select@2x.png" mode="">
								</image>
								<view class="name-phone">
									<text>{{ item.name }}</text>
									<text>{{ item.phone }}</text>
								</view>
								<view class="address">{{ item.address_detail }}</view>
							</view>
							<image class="edit-btn" src="../../static/images/pay/edit-icon@2x.png" mode=""
								@click="toAddressPage('edit', item)"></image>
						</view>
					</block>
				</view>
				<view class="popup-footer" @click="toAddressPage('add')">新增收货地址</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		loadVipinfo
	} from '@/api/user/user.js';
	import uniPopup from '@/pageA/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				isGou: 0,
				orderDetail: {},
				addressData: {},
				addressList: [],
				danjia: 0,
				count: 1,
				buyerMessage: '',
				meiguiCont: 0,
				cartId: 0,
				deduction_ratio: 0.07
			};
		},
		// computed:{
		// 	deduction_value(){
		// 		return Math.ceil(this.orderDetail.total_price / this.deduction_ratio);
		// 	}
		// },
		onLoad(options) {
			this.cartId = options.id;
			uni.getStorage({
				key: 'vipInfo',
				success: res => {
					this.meiguiCont = res.data.balance
					console.log(res)
				}
			});
			this.initData(options);
			this.getAddressList();
		},
		methods: {
			clickGou(str) {
				this.isGou = str;
				console.log(this.isGou)
			},
			jianCont() {
				if (this.count == 1) {
					return false;
				}
				// this.count = this.count - 1;
			},
			jiaCont() {
				// this.count = this.count + 1;
			},

			//底部弹出选择地址
			togglePopup(type, open) {
				this.$nextTick(() => {
					this.$refs.showpopup.open();
				});
			},
			closePop() {
				this.$nextTick(() => {
					this.$refs.showpopup.close();
				});
			},
			selectAddress(item) {
				console.log(item);
				this.addressData = item;
				this.closePop();
			},
			toAddressPage(value, item) {
				if (item) {
					const {
						_id
					} = item;
					uni.navigateTo({
						url: `/pageA/address/address?id=${_id}&flag=${value}&ids=${this.ids}`
					});
				} else {
					uni.navigateTo({
						url: `/pageA/address/address?flag=${value}&ids=${this.ids}`
					});
				}
			},
			initData(options) {
				this.ids = options.id;
				this.$request
					.post({
						url: 'cart/checkout',
						data: {
							cart_ids: [options.id],
							immediately: true
						}
					})
					.then(res => {
						console.log(res);
						if (res.status === 1) {
							this.orderDetail = res.data;
							this.addressData = this.orderDetail.address;
							this.deduction_ratio = this.orderDetail.deduction_ratio || 0.07;
							this.danjia = this.orderDetail.select_carts[0].product_info.price
						}
					});
			},
			getAddressList() {
				this.$request
					.get({
						url: 'address/list',
						data: {}
					})
					.then(res => {
						if (res.status === 1) {
							this.addressList = res.data;
						}
					});
			},
			submitPay() {
				const params = {};
				params.buyer_message = this.buyerMessage;
				if (this.addressData && this.addressData._id) {
					params.address_id = this.addressData._id;
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择收货地址'
					});
					return;
				}
				this.$request
					.post({
						url: 'cart/updateCart',
						data: {
							num: this.count,
							cart_id: this.ids
						}
					})
					.then(res => {
						const self = this;
						var user_roses = '';
						if (self.isGou == 1) {
							user_roses = true
						} else {
							user_roses = false;
						}
						this.$request
							.post({
								url: 'order/postOrder',
								data: {
									use_roses: user_roses,
									...params,
									cart_ids: [this.ids]
								}
							})
							.then(res => {
								if (res.status === 1) {
									if (res.data.pay_price == 0) {

										loadVipinfo().then(res => {
											if (res.status == 1) {
												uni.setStorageSync('vipInfo', res.data);
												getApp().globalData.vipInfo = res.data;
												console.log("this.globalData.vipInfo-------=", getApp()
													.globalData.vipInfo);
											}
										});

										uni.showToast({
											icon: 'none',
											title: '支付成功'
										});
										uni.redirectTo({
											url: '/pageA/order/order?state=-1'
										});
										return
									}
									self.$request
										.post({
											url: 'order/wxpay',
											data: {
												order_id: res.data.order_id,
												trade_type: 'miniapp'
											}
										})
										.then(r => {
											if (r.status === 1) {
												console.log("requestPayment r", r);
												uni.requestPayment({
													...r.data,
													success: () => {
														loadVipinfo().then(res => {
															if (res.status == 1) {
																uni.setStorageSync('vipInfo', res.data);
																getApp().globalData.vipInfo = res.data;
																console.log("this.globalData.vipInfo-------=", getApp().globalData.vipInfo);
															}
														});

														uni.showToast({
															icon: 'none',
															title: '支付成功'
														});
														uni.redirectTo({
															url: '/pageA/order/order?state=-1'
														});
													},
													fail: res => {
														console.log("res", res);
														uni.showToast({
															icon: 'none',
															title: '取消支付'
														});
														uni.redirectTo({
															url: '/pageA/order/order?state=-1'
														});
													},
													complete: () => {}
												});
											}
										});
								}
							});
					})

			}
		}
	};
</script>

<style scoped lang="less">
	@import '@/static/css/theme.less';
	@import '@/static/css/util.less';

	.pay-container {
		background: #f3f6f8;
		padding-top: 14upx;

		.pay-order-info {
			padding: 0 32upx;
			background-color: @fff;

			.address-container {
				.has-address {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2upx solid #dfe1ec;
					padding: 30upx 0;

					.title {
						color: #474a58;
						font-size: 30upx;
					}

					.iconfont {
						font-size: 33upx;
						color: #b6bbcd;
					}
				}

				.no-address {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2upx solid #dfe1ec;
					min-height: 100upx;

					.title {
						color: #474a58;
						font-size: 30upx;
					}

					.iconfont {
						font-size: 33upx;
						color: #b6bbcd;
					}
				}
			}

			.order-pay-list {
				border-bottom: 2upx solid #dfe1ec;
				padding: 0 0 18upx 0;
				margin-top: 26upx;

				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 22upx;

					.order-image {
						width: 232upx;
						height: 152upx;
						margin-right: 20upx;
					}

					.item-right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							color: #474a58;
							font-size: 26upx;
							.ellipsis-x(2);
						}

						.order-info {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.price-wrapper {
								color: #474a58;

								.unit {
									font-size: 26upx;
								}

								.price {
									font-size: 30upx;
								}
							}

							.add-reduce {
								color: #474a58;
								font-size: 30upx;
								margin: 0 20upx;
								display: flex;
								align-items: center;

								.count {
									margin: 0 20upx;
								}

								image {
									width: 40upx;
									height: 40upx;
								}
							}
						}
					}
				}
			}
		}

		.order-message {
			padding-top: 24upx;
			padding-bottom: 40upx;

			.message-price-total {
				color: #474a58;
				font-size: 26upx;
				display: flex;
				justify-content: space-between;
				line-height: 36upx;

				.label {}

				.value {}
			}

			.discount {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				color: #474a58;
				margin-top: 22upx;
				margin-bottom: 28upx;

				.left {
					display: flex;
					align-items: center;

					.select-icon {
						width: 40upx;
						height: 40upx;
					}

					.flower-icon {
						width: 30upx;
						height: 36upx;
						margin: 0 10upx 0 22upx;
					}
				}

				.right {}
			}

			.current-wrapper {
				display: flex;
				justify-content: space-between;

				.total-count {
					font-size: 26upx;
					color: #474a58;
				}

				.total-price {
					font-size: 30upx;
					flex-direction: row;
					align-items: center;

					.label {
						color: #474a58;
					}

					.money {
						color: @defaultC;
					}
				}
			}

			.textarea-wrapper {
				display: flex;
				margin-top: 22upx;

				.label {
					font-size: 26upx;
					color: #474a58;
					margin-right: 12upx;
				}

				textarea {
					flex: 1;
					width: 568upx;
					height: 174upx;
					background: rgba(243, 246, 248, 1);
					border-radius: 4upx;
					padding: 18upx;
				}
			}
		}

		.pay-footer {
			width: 750upx;
			height: 98upx;
			background: rgba(255, 255, 255, 1);
			border: 1upx solid rgba(233, 235, 240, 1);
			display: flex;
			padding-right: 32upx;
			justify-content: flex-end;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;

			.total-price {
				font-size: 30upx;
				font-weight: @defayltWeight;
				margin-right: 70upx;

				.label {
					color: #474a58;
				}

				.value {
					color: @defaultC;
				}
			}

			.pay-btn {
				width: 178upx;
				height: 80upx;
				border-radius: 4px;
				font-size: 34upx;
				font-weight: @defayltWeight;
				line-height: 48upx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: @defaultBg;
				color: @fff;
			}
		}

		.popup-address-list {
			background-color: @fff;
			border-radius: 12upx 12upx 0 0;
			border: 2upx solid rgba(250, 250, 250, 1);

			.popup-header {
				width: 100%;
				height: 90upx;
				display: flex;
				align-items: center;
				padding: 0 23upx;
				border-bottom: 2upx solid #dfe1ec;
				font-size: 30upx;

				.cancel {
					color: #8389a0;
					margin-right: 194upx;
				}

				.title {
					color: #474a58;
					font-weight: 500;
				}
			}

			.address-list {
				width: 100%;
				min-height: 450upx;
				padding: 40upx 32upx;

				.address-item {
					margin-bottom: 60upx;
					position: relative;
					font-size: 30upx;
					color: #474a58;

					&:last-of-type {
						margin-bottom: 0;
					}

					.name-phone {
						margin-bottom: 4upx;
					}

					.name-phone,
					.address {
						padding-left: 46upx;
						line-height: 42upx;
					}

					.select-btn {
						position: absolute;
						left: 0;
						top: 0;
						width: 40upx;
						height: 40upx;
					}

					.edit-btn {
						position: absolute;
						right: 0;
						top: 0;
						width: 36upx;
						height: 36upx;
					}
				}
			}

			.popup-footer {
				// position: fixed;
				// left: 0;
				// bottom: 0;
				width: 100%;
				height: 98upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30upx;
				color: #2d8eff;
				border-top: 2upx solid #dfe1ec;
			}
		}
	}
</style>
